<template>
  <!-- 使用来自状态商店的 adminInfo 的头像 -->
  <img :src="adminInfo.avatar" alt="" />
  <div>当前语言是：{{ config.lang.defaultLang }}</div>
  <div>{{ t('message.hello') }}</div>
  <button @click="changeLocale('en')">English</button>
  <button @click="changeLocale('fr')">Français</button>
</template>

<script lang="ts" setup>
import {computed, onMounted} from 'vue'
import { useAdminInfo } from '/@/stores/adminInfo' // 管理员的状态数据
import { useConfig } from '/@/stores/config' // WEB的全局布局配置数据
import { useNavTabs } from '/@/stores/navTabs' // 后台标签页数据
import { useTerminal } from '/@/stores/terminal'
import {editDefaultLang} from "/@/lang/index";
import {createI18n, useI18n} from "vue-i18n"; // 终端

const adminInfo = useAdminInfo()
const config = useConfig()
const { t, locale } = useI18n();

const messages = {
  en: {
    message: {
      hello: 'hello'
    }
  },
  fr: {
    message: {
      hello: 'bonjour'
    }
  }
};
const i18n = createI18n({
  locale: 'en', // set default locale
  messages, // set locale messages
});
onMounted(() => {
  // Change the locale
  locale.value = 'fr';
});
function changeLocale(newLocale:string) {
  locale.value = newLocale;
}
console.log('管理员ID是:', adminInfo.id)
console.log('当前语言是:', config.lang.defaultLang)


</script>